type Props = {
   label: string;
   value: string | number;
   editable?: boolean;
   active?: boolean;
   onChange?: (value: number) => void;
   onClick?: any;
   labelCls?: string;
   valueCls?: string;
};

const BillTag = (props: Props) => {
   const {
      label,
      value,
      editable = false,
      active = false,
      onChange,
      onClick = undefined,
      labelCls = '',
      valueCls = '',
   } = props;


   const handleChange = (e) => {
      onChange(e.target.value);
   };

   const outerCls =
      'flex mr-2 mt-2 ' + (active ? 'rounded-md border border-indigo-600 font-semibold' : '');
   const _labelCls =
      'bg-indigo-100 px-1 rounded-l-md text-xs flex items-center ' + labelCls;

   const _valueCls =
      'bg-white px-1 rounded-r-md border text-xs flex items-end ' + valueCls;
   return (
      <div className={outerCls} onClick={onClick}>
         <span className={_labelCls}>{label}</span>
         <span className={_valueCls}>
            ￥
            {editable ? (
               <input
                  value={value}
                  className="w-full bg-transparent"
                  // type="number"
                  onChange={handleChange}
               />
            ) : (
               value
            )}
         </span>
      </div>
   );
};

export default BillTag;
